<style>
	.editTable .label {
		min-width: 60px;
		width: 60px;
	}

	.depInputClass {
		border: 1px solid #ffa8a8;
		background-color: #fff3f3;
	}

	.selectClass {
		border: 1px solid #ffa8a8;
		background-color: #fff3f3;
	}

	.validatebox-invalid {
		border: 1px solid #ffa8a8;
	}
</style>
<form id="editForm" method="post">
	<input type="hidden" name="id" id="id">
	<table class="editTable">
		<tr>
			<td class="label">显示名称</td>
			<td><input type="text" name="equipName" class="topjui-textbox"
			           data-options="required:true,validType:'length[1,30]'"
			           style="width: 200px;">
			</td>

			<td class="label">通信模式</td>
			<td><select name="communicationModel" id="communicationModel"
			            style="width: 200px;height: 35px;">
				<option value="">请选择</option>
				<option value="GPRS">GPRS</option>
				<option value="RDSS">RDSS</option>
				<option value="RDSS+GPRS">RDSS+GPRS</option>
			</select>
			</td>
		</tr>
		<tr id="chooseSimNo">
			<td class="label" id="simNoTd1"><font id="simNoFont">设备号</font></td>
			<td id="simNoTd2"><input type="text" name="simNo" class="topjui-textbox"
			                         data-options="required:true,validType:'length[6,30]'"
			                         style="width: 200px;">
			</td>
			<td class="label" id="bdsimNo1" style="display:none">流量卡号</td>
			<td id="bdsimNo2" style="display:none"><input type="text" id="simIOT" name="simIOT"
			                                              style="width: 200px;height: 32px;">
			</td>
		</tr>
		<tr>
			<td class="label">所属分组</td>
			<td colspan="3">
				<input name="depId" id="depId" type="hidden" value="0"/>
				<input name="depName" id="edit-department" type="text" readonly
				       value="" class="depInputClass"
				       style="width: 472px;height: 30px;" onclick="showMenu();"/>
			</td>
		</tr>
		<tr>
			<td class="label">开始服务时间</td>
			<td><input type="text" id="startTime" name="startTime" class="topjui-datetimebox"
			           data-options="required:true" editable="false"
			           style="width: 200px;">
				<input type="hidden" id="startTimeHidden">
			</td>
			<td class="label">结束服务时间</td>
			<td><input type="text" id="endTime" name="endTime" class="topjui-datetimebox" editable="false"
			           data-options="required:true"
			           style="width: 200px;">
				<input type="hidden" id="endTimeHidden">
			</td>
		</tr>
		<tr>
			<td class="label">设备类型</td>
			<td><select name="typeID" id="typeID"
			            style="width: 200px;height: 35px;">
				<option value="">请选择</option>
				<option value="2">车载终端</option>
				<option value="1">手持终端</option>
				<option value="0">指挥卡</option>
			</select> <input type="hidden" name="typeName" id="typeName" value="车载终端">
			</td>
			<td class="label">车牌号</td>
			<td><input type="text" name="plateNo" class="topjui-textbox" data-options="validType:'length[0,20]'"
			           style="width: 200px;">
			</td>
		</tr>
		<tr>
			<td class="label">所有者</td>
			<td><input type="text" name="owner" class="topjui-textbox" data-options="validType:'length[0,20]'"
			           style="width: 200px;">
			</td>
			<td class="label">充值时间</td>
			<td><input type="text" id="lastCheckTime" name="lastCheckTime" class="topjui-datetimebox" editable="false"
			           data-options="" style="width: 200px;">
				<input type="hidden" id="lastCheckTimeHidden">
			</td>
		</tr>
		<tr>
			<td class="label">限速</td>
			<td><input type="text" id="speedLimit" name="speedLimit" class="topjui-numberbox" data-options="required:true,min:0"
			           style="width: 200px;">
			</td>
		</tr>
	</table>
</form>


<div id="depTree-win" class="topjui-dialog" title="分组树形" data-options="closed:true,iconCls:'icon-save',modal:true"
     style="width:500px;height:400px;">
	<ul id="zTree" class="ztree" style="margin: 3px;"></ul>
</div>

<script type="text/javascript">
	Date.prototype.Format = function (fmt) { //author: meizz
		var o = {
			"M+": this.getMonth() + 1, //月份
			"d+": this.getDate(), //日
			"h+": this.getHours(), //小时
			"m+": this.getMinutes(), //分
			"s+": this.getSeconds(), //秒
			"q+": Math.floor((this.getMonth() + 3) / 3), //季度
			"S": this.getMilliseconds() //毫秒
		};
		if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
		for (var k in o)
			if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
		return fmt;
	}

	$(function () {

		$("#communicationModel").change(function () {
			var value = $(this).val();
			if (value == 'GPRS') {
				$("#simNoFont").html('设备号');
				$("#simNoTd1").show();
				//var td = '<td class="label">simNo</td><td><input type="text" name="simNo" class="topjui-textbox" data-options="required:true" style="width: 200px;"></td>';
				$("#simNoTd2").show();
				$("#bdsimNo1").hide();
				$("#bdsimNo2").hide();
				$('#simIOT').validatebox({required: false});
			}
			if (value == 'RDSS') {
				$("#simNoFont").html('设备号');
				$("#simNoTd1").show();
				$("#simNoTd2").show();
				$("#bdsimNo1").hide();
				$("#bdsimNo2").hide();
				$('#simIOT').validatebox({required: false});
			}
			if (value == 'RDSS+GPRS') {
				$("#simNoFont").html('设备号');
				$('#simIOT').validatebox({required: false});
				//$("#simIOT").addClass('depInputClass');
				$("#simNoTd1").show();
				$("#simNoTd2").show();
				$("#bdsimNo1").show();
				$("#bdsimNo2").show();
				/*if ($.trim($("#simIOT").val()) != '') {
				 $("#simIOT").removeClass('depInputClass');
				 }*/
			}
		})

		$('#communicationModel').validatebox({required: true});
		$('#typeID').validatebox({required: true});
		$("#typeID").change(function () {
			var value = $(this).val();
			if (value == '1') {
				$("#typeName").val('手持终端');
			}
			if (value == '2') {
				$("#typeName").val('车载终端');
			}
			if (value == '0') {
				$("#typeName").val('指挥卡');
			}
		})

	})

	function chooseClass() {
		var simIOT = $.trim($('#simIOT').val());
		if (simIOT != '') {
			$("#simIOT").removeClass('depInputClass');
		} else {
			$("#simIOT").addClass('depInputClass');
		}
	}


	/*	var zNodes = [
	 {id: 1, pId: 0, name: "分组 1", open: true},
	 {id: 11, pId: 1, name: "分组 1-1", open: true},
	 {id: 111, pId: 11, name: "分组 1-1-1"},
	 {id: 112, pId: 11, name: "分组 1-1-2"},
	 {id: 12, pId: 1, name: "分组 1-2", open: true},
	 {id: 121, pId: 12, name: "分组 1-2-1"},
	 {id: 122, pId: 12, name: "分组 1-2-2"},
	 ];*/


	//ztree初始化设置
	var setting = {
		view: {
			dblClickExpand: false
		},
		data: {
			simpleData: {
				enable: true,
			}
		},
		callback: {
			onClick: onClick,
			//onCheck: onCheck
		}
	};
	//数据

	function onClick(e, treeId, treeNode) {

		if (treeNode) {
			var name = treeNode.name;
			$("#edit-department").val(name);
			$("#edit-department").removeClass('depInputClass');
			$("#depId").val(treeNode.id);
			hideMenu();
		}

	}

	function onCheck(e, treeId, treeNode) {
		var zTree = $.fn.zTree.getZTreeObj("zTree"),
				nodes = zTree.getCheckedNodes(true),
				v = "",
				id = "";
		code = ""
		for (var i = 0, l = nodes.length; i < l; i++) {
			v += nodes[i].name + ",";
			id += nodes[i].id + ","
			code += nodes[i].code + ","
		}
		if (v.length > 0) {
			v = v.substring(0, v.length - 1);
			id = id.substring(0, id.length - 1);
			code = code.substring(0, code.length - 1);
		}
		$("#edit-department").val(v);
		$("#depId").val(id);
	}

	function showMenu() {
		$("#depTree-win").dialog('open');
		$.post(path + "/dep/depTree", function (data) {
			//console.info(data);
			$.fn.zTree.init($("#zTree"), setting, data);
			var treeObj = $.fn.zTree.getZTreeObj("zTree");
			var nodes = treeObj.getNodes();
			if (nodes.length > 0) {
				for (var i = 0; i < nodes.length; i++) {
					treeObj.expandNode(nodes[i], true, false, false);
				}
			}
		});
	}
	function hideMenu() {
		$("#depTree-win").dialog('close');
	}

</script>

